<template>
  <div class="Page-new-music">
    <div class="header-tabs">
      <div class="tabs">
        <span
          class="tabs-item"
          :class="{active: index===tabsActive}"
          @click="cutTabs(index)"
          v-for="(item, index) in ['新歌速递','新碟上架']"
          :key="index"
        >{{item}}</span>
      </div>
    </div>
    <el-tabs v-model="songsName" v-show="tabsActive===0">
      <el-tab-pane lazy label="全部" name="all">
        <E-new-music-songs type="0" />
      </el-tab-pane>
      <el-tab-pane lazy label="华语" name="chinese">
        <E-new-music-songs type="7" />
      </el-tab-pane>
      <el-tab-pane lazy label="欧美" name="occident">
        <E-new-music-songs type="96" />
      </el-tab-pane>
      <el-tab-pane lazy label="韩国" name="korea">
        <E-new-music-songs type="16" />
      </el-tab-pane>
      <el-tab-pane lazy label="日本" name="Japanese">
        <E-new-music-songs type="8" />
      </el-tab-pane>
    </el-tabs>
    <el-tabs v-model="albumName" v-show="tabsActive===1">
      <el-tab-pane lazy label="全部" name="all">
        <!--  -->
      </el-tab-pane>
      <el-tab-pane lazy label="华语" name="chinese">
        <!-- <E-page-singer :keywords="keywords" /> -->
      </el-tab-pane>
      <el-tab-pane lazy label="欧美" name="occident">
        <!-- <E-page-occident :keywords="keywords" /> -->
      </el-tab-pane>
      <el-tab-pane lazy label="韩国" name="korea">
        <!-- <E-page-album :keywords="keywords" /> -->
      </el-tab-pane>
      <el-tab-pane lazy label="日本" name="Japanese">
        <!-- <E-page-playlist :keywords="keywords" /> -->
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  components: {
    'E-new-music-songs': () => import('./module/E-new-music-songs')
  },
  data() {
    return {
      tabsActive: 0,
      songsName: 'all',
      albumName: 'all'
    };
  },
  methods: {
    cutTabs(index) {
      if (this.tabsActive === index) return;
      if (index === 1) {
        this.$message('该功能暂未完善，敬请期待 ~');
        return;
      }
      this.tabsActive = index;
    }
  }
};
</script>

<style lang="scss" scoped>
.Page-new-music {
  padding: 20px;
  & > .header-tabs {
    text-align: center;
    margin: 20px 0;
    & > .tabs {
      display: inline-block;
      border: 1px solid #dcdee6;
      border-radius: 5px;
      overflow: hidden;
      & > .tabs-item {
        display: inline-block;
        width: 120px;
        line-height: 25px;
        cursor: pointer;
        &:hover {
          background: rgb(245, 245, 247);
        }
        &.active {
          color: #fff;
          background: rgb(124, 125, 133);
        }
      }
    }
  }
  & > .el-tabs {
    & > .el-tabs__header {
      margin: 0;
      .el-tabs__item {
        padding: 0 20px;
      }
    }
  }
}
</style>
